<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <script type="text/javascript">
        /**
         * 添加
         */
        $('#btn_save').click(function () {
            //1. 表单验证
            var rs=$('#form').data("bootstrapValidator").isValid();
            if (rs) {
                //2 如果验证成功发送ajax请求保存角色
                var data = $("#form").serialize();
                var options = {
                    url: '/system/role/add',
                    type: 'post',
                    dataType: 'json',
                    data: $('#form').serialize(),
                    success: function (data) {
                        if (data) {
                            showAlert('添加成功!',function () {
                                $('#table').bootstrapTable('refresh', {silent: true})
                                $('#modal').modal('hide')
                            });
                        }
                    }
                };
                $.ajax(options);
            }
        });
    </script>
</head>
<body class="fixed-left">
<form id="form" class="form-horizontal">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
        </button>
        <h5 class="modal-title" id="exampleModalLabel">添加角色</h5>
    </div>
    <div class="modal-body">
        <div class="container">
            <div class="form-group row">
                <label for="roleName" class="col-sm-2 form-control-label">角色名：</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="roleName" name="name" placeholder="普通用户" required data-bv-notempty-message="登录名是必填的并且不能为空" >
                </div>
            </div>
            <div class="form-group row">
                <label for="roleRemark" class="col-sm-2 form-control-label">备注：</label>
                <div class="col-sm-10">
                    <textarea class="form-control" id="roleRemark" name="remark" placeholder="无"></textarea>
                </div>
            </div>
        </div>
    </div>
    <div class="modal-footer">
        <button id="btn_save" type="button" class="btn btn-primary">保存</button>
        <button type="reset" class="btn btn-secondary" >重置</button>
    </div>
</form>
</body>
</html>